<template>
<div>
    <Button type="primary" @click="modal1 = true">模态框详情</Button>
    <Modal v-model="modal1" title="xxx事件详情" @on-ok="ok" @on-cancel="cancel" width="60">
        <div class="detail">
            <Divider orientation="left">民主政事项一</Divider>
            <Row class="p10">
                <Col span="12">
                    <span class="bold">订单编号:</span>
                    <span>K661562549930515</span>
                </Col>
                <Col span="10">
                    <span class="bold">订单编号:</span>
                    <span>K661562549930515</span>
                </Col>
            </Row>
            <Row class="p10">
                <Col span="12">
                    <span class="bold">订单编号:</span>
                    <span>K661562549930515</span>
                </Col>
                <Col span="10">
                    <span class="bold">订单编号:</span>
                    <span>K661562549930515</span>
                </Col>
            </Row>
            <Divider orientation="left">民政事项二</Divider>
            <Row class="p10">
                <Col span="24">
                    <div class="bold">详情内容:</div>
                    <div>京辽旅游一卡通惠民旅游套票京辽旅游一卡通惠民旅游套票京辽旅游一卡通惠民旅游套票京辽旅游一卡通惠民旅游套票京辽旅游一卡通惠民旅游套票</div>
                </Col>
            </Row>
            <Divider orientation="left">民政事项三</Divider>
            <CellGroup>
                <Cell title="Only show titles" />
                <Cell title="Display label content" label="label content" />
                <Cell title="Display right content" extra="details" />
                <Cell title="Link" extra="details" to="/components/button" />
                <Cell title="Open link in new window" to="/components/button" target="_blank" />
                <Cell title="Disabled" disabled />
                <Cell title="Selected" selected />
                <Cell title="With Badge" to="/components/badge">
                    <Badge :count="10" slot="extra" />
                </Cell>
                <Cell title="With Switch">
                    <Switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
            <Divider orientation="left">切换形式的页面</Divider>
                <Tabs value="name1">
                    <TabPane label="标签一" name="name1">
                        <Divider orientation="left">民主政事项一</Divider>
                        <Row class="p10">
                            <Col span="12">
                                <span class="bold">订单编号:</span>
                                <span>K661562549930515</span>
                            </Col>
                            <Col span="10">
                                <span class="bold">订单编号:</span>
                                <span>K661562549930515</span>
                            </Col>
                        </Row>
                    </TabPane>
                    <TabPane label="标签二" name="name2">标签二的内容</TabPane>
                    <TabPane label="标签三" name="name3">标签三的内容</TabPane>
                </Tabs>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"   @click="ok">确定</Button>
        </div>
    </Modal>
</div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false
    }
  },
  methods: {
    ok () {
      this.$Message.info('Clicked ok')
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    }
  }
}
</script>

<style scoped>
.detail{
    font-size: 14px;
}
.bold{
    font-weight: bold;
    margin-right: 4px;
}
    .p10{
        padding: 10px;
    }
</style>
